<template>
    <div class="code-layout">      
      <plug-state :statusStr="status" />
      <h3 class="info-title">基本信息</h3>
      <p class="info-item-name">资源组</p>
      <ul class="info-item">
        <p>---主节点---</p>
        <li v-for="tag in masterNode" :key="tag.i">
          <span class="val">环境：{{tag.image.name}}</span>
          <span class="val">资源组：{{tag.product.name}}</span>
          <span class="val">数量 :{{tag.pod_num}}</span>
        </li>
      </ul>
      <ul class="info-item" v-if="slaveNode.length != 0">
        <p>---子节点---</p>
        <li v-for="tag in slaveNode" :key="tag.i">
          <span class="val">环境：{{tag.image.name}}</span>
          <span class="val">资源组：{{tag.product.name}}</span>
          <span class="val">数量:{{tag.pod_num}}</span>
        </li>
      </ul>
      <ul class="info-item">        
        <p>---仿真节点---</p>
        <li>
          <span class="val">环境：{{simulationNode.image.name}}</span>
          <span class="val">资源组：{{simulationNode.product.name}}</span>
          <span class="val">数量:{{simulationNode.pod_num}}</span>
        </li>
      </ul>
  
      <md-preview :biz_id="$route.query.id" type="dataset" @editState="editState" />
    </div>
  </template>
  
  <script>
 
  import { getGameDeployDetail } from '@/api/gameDeploy'
  import plugState from '@/components/module/plug-state'
  export default {
    data() {
      return {
        status: null,
        masterNode: [],
        slaveNode: [],
        simulationNode: []
      };
    },  
    props: ['detailData'],
    watch: {
      detailData(val) {
        console.log('val', val);
        this.status = val.status;
        this.masterNode = val.node_group_list.filter(node => node.type == 1);
        this.slaveNode = val.node_group_list.filter(node => node.type != 1);
        this.simulationNode = val.simulation_node_group;
      }
    },  
    
    mounted() {
      this.status = this.detailData.status;      
      this.masterNode = this.detailData.node_group_list && this.detailData.node_group_list.filter(node => node.type == 1);
      this.slaveNode = this.detailData.node_group_list && this.detailData.node_group_list.filter(node => node.type != 1);
      this.simulationNode = this.detailData && this.detailData.simulation_node_group;
      this.tcpPortList = this.detailData && this.detailData.tcp_port_list;
    },
    components: {
      plugState
    },      
    destroyed() {
  
    },
    methods: {
      async getDetail() {
        console.log('aaa', this.$route.query.id)
        if (!this.$route.query.id) return
        let res = await getGameDeployDetail({ id: this.$route.query.id });
        if (res && res.data) {
          this.detailData = res.data;
          console.log('bbbb', this.detailData)
        }
      },
      editState(state) {
        console.log(state)
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .code-layout {
    background: #F2F6FC;
    // padding-bottom: 20px;
  
    .state-title {
      font-weight: bold;
      color: #606266;
      line-height: 28px;
      padding: 16px 16px 0;
      font-size: 20px;
    }
  
    .step-state {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 8px 40px;
      height: 52px;
  
      .step-state-adorn {
        flex: 1;
        height: 1px;
        background: #C0C4CC;
        overflow: hidden;
        margin-top: 6px;
      }
  
      .step-state-item {
        width: 14px;
        height: 14px;
        position: relative;
        border-radius: 7px;
  
        span {
          position: absolute;
          left: 50%;
          top: 22px;
          display: block;
          width: 100px;
          text-align: center;
          transform: translate(-50%, 0);
        }
      }
  
      .completed {
        background: #67C23A;
      }
  
      .queuing {
        background: #0077FF;
      }
  
      .deploying {
        background: #2E79F6;
      }
  
      .running {
        background: #67C23A;
      }
  
      .terminating {
        background: #AAAAAA;
      }
  
      .failed {
        background: #E90000;
      }
    }
  }
  
  .info-title {
    line-height: 26px;
    color: #606266;
    padding: 8px 16px 0;
    font-size: 20px;
  }
  
  .info-item-name {
    line-height: 26px;
    color: #606266;
    padding: 8px 16px;
  }
  
  .info-item {
    margin: 0 16px;
    background: #FFF;
  
    li {
      display: flex;
      width: 100%;
      justify-content: space-between;
      border-bottom: 1px solid #E6E6E6;
      line-height: 40px;
      height: 40px;
      padding: 0 8px;
    }
  
    .key {}
  
    .val {
      min-width: 220px;
    }
  }
  </style>